import React from "react"
import { View, Image } from "@tarojs/components"
import clsx from "clsx"
import styles from "./index.module.scss"
import { navigation } from "@/utils/router"
import { pageMapperCommunity } from "@/constants/pageMap"

type IProps = {
  className?: string
  /** 话题 */
  wordItem: {
    name: string
  } & PrimaryKey<number>
}
/**
 * @component 话题项
 */
export default function GpWordItem({ className, wordItem }: IProps) {
  return (
    <View
      className={clsx(styles.relatedWord, className)}
      onClick={() => navigation(pageMapperCommunity.WordDetail, { id: wordItem.id })}
    >
      <Image
        src="/images/yikao-community/topicdeep.png"
        className="mr-8px w-28px h-28px inline-block align-top"
      />
      {wordItem.name}
    </View>
  )
}
